<template>
  <baseCard :title="'需求跟踪'"
            :height="height">
    <div class="demand-container">
      <VptDemandPie class="demand-review common-demand"
                    v-bind="$attrs"
                    :isLandscape="isLandscape"></VptDemandPie>

      <VptReviewBar class="review-bar common-back-demand common-demand"
                    v-bind="$attrs"
                    :isLandscape="isLandscape"></VptReviewBar>

      <VptOfficeDemand class="office-demand common-back-demand common-demand"
                       v-bind="$attrs"
                       :isLandscape="isLandscape"></VptOfficeDemand>
    </div>
  </baseCard>
</template>

<script setup>
import VptDemandPie from "./components/vpt-demand-pie.vue";
import VptReviewBar from "./components/vpt-review-bar.vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptOfficeDemand from "./components/vpt-office-demand.vue";
import { useRouterStore } from "@/store/routerStore.js";
import { computed } from "vue";

const props = defineProps({
  height: { type: String, default: '7rem' }
})

defineOptions({
  name: "vptModuleTrace",
});

const routerStore = useRouterStore();

// 是否为横屏
const isLandscape = computed(() => {
  return routerStore.prefix === 'horvsreen'
})
</script>

<style lang="less" scoped>
.demand-container {
  display: flex;
  width: 100%;
  height: 100%;

  .demand-review {
    height: 100%;
    margin-right: 0.08rem;
  }

  .review-bar {
    height: 100%;
    margin-right: 0.08rem;
  }

  .office-demand {
    height: 100%;
    padding: 0.12rem 0.16rem;
    box-sizing: border-box;
  }

  .common-back-demand {
    border: 0.01rem solid #e6ebf5;
    box-sizing: border-box;
    background: #0d2542;
    // background-image: url("../../../assets/img/theme1/network.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .common-demand {
    width: calc(~"(100% - 0.16rem) / 3");
  }
}
</style>